<template>
  <div class="chat-main">
    <div class="chat-title">
      <h2><i></i><span>公共聊天区</span></h2>
      <div class="chat-people" id="chat-people"></div>
      <div class="userlist" id="list-main">
        <i class="curr"></i>
        <h3 class="h6">在线用户(<em id="people-number"></em>)</h3>
        <ul id="people-list"></ul>
      </div>
    </div>
    <div id="chat-body" class="chat-list l-r-m">
      <ul id="chat-container" class="l-r-m-list"></ul>
    </div>
    <div class="chat-send">
      <div class="chat-tips-scroll" id="chat-tips-scroll">有<em>0</em>条未读记录。</div>
      <div class="chat-tools">
        <div class="lrb-t">
          <div class="face" id="btn-face" @click="chatSmile"></div>
          <div class="o-t" id="isPrivateChat" @click="chatSelect">
            对
            <span class="select-span">
              <span class="select-current" id="select-name">所有人</span>
              <em class="p-arrow"></em>
            </span>
            <ul id="chat-options" @click="chatOption($event)">
              <li>所有人</li>
            </ul>
            说:
          </div>
        </div>
        <ul class="emoji-table" id="chat-smile-list" v-if="uiChat.isShowChatSmileList">
          <li v-for="(item, index) in smiles" :key="index" @click="smilesList(index + 1)">
            <img :src="item" alt="" />
          </li>
        </ul>
      </div>
      <div class="chat-area">
        <div class="chat-tips" id="chat-tips">
          <span class="arr"></span>
          <a href="javascript:;" class="tips-main">您现在感觉卡了吗？点这里</a>
          <a href="javascript:;" class="close-tips" id="close-tips">关闭提示</a>
        </div>
        <div class="lrb-b">
          <input class="chat-send-content" contenteditable="true" id="chat-content" />
          <a href="javascript:;" class="btn btn-mini btn-chat" id="chat-submit" @click="sendMsg"
            >发送</a
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LiveInfo from '@views/live/cc/common/liveinfo'
import Utils from '@views/live/cc/common/utils'
import PrivateChatMsg from './PrivateChatMsg'
import ChatMsg from './ChatMsg'
import BroadChatMsg from './BroadChatMsg'
import UIChat from './UIChat'
export default {
  data() {
    return {
      HDScene: window.liveHDScene,
      isCanSend: true,
      uiChat: new UIChat(),
      selectedTeacher: 'all',
      selectedteacherTitle: '',
      timeOutId: null,
      chatMap: {},
      teachers: {},
      smiles: [
        require('@/views/live/cc/assets/images/emoji/01.png'),
        require('@/views/live/cc/assets/images/emoji/02.png'),
        require('@/views/live/cc/assets/images/emoji/03.png'),
        require('@/views/live/cc/assets/images/emoji/04.png'),
        require('@/views/live/cc/assets/images/emoji/05.png'),
        require('@/views/live/cc/assets/images/emoji/06.png'),
        require('@/views/live/cc/assets/images/emoji/07.png'),
        require('@/views/live/cc/assets/images/emoji/08.png'),
        require('@/views/live/cc/assets/images/emoji/09.png'),
        require('@/views/live/cc/assets/images/emoji/10.png'),
        require('@/views/live/cc/assets/images/emoji/11.png'),
        require('@/views/live/cc/assets/images/emoji/12.png'),
        require('@/views/live/cc/assets/images/emoji/13.png'),
        require('@/views/live/cc/assets/images/emoji/14.png'),
        require('@/views/live/cc/assets/images/emoji/15.png'),
        require('@/views/live/cc/assets/images/emoji/16.png'),
        require('@/views/live/cc/assets/images/emoji/17.png'),
        require('@/views/live/cc/assets/images/emoji/18.png'),
        require('@/views/live/cc/assets/images/emoji/19.png'),
        require('@/views/live/cc/assets/images/emoji/20.png')
      ]
    }
  },
  methods: {
    addEvents() {
      // 广播信息添加
      this.HDScene.onBroadcastMsg({
        callback: info => {
          let msgInfo = info
          let broadMsg = new BroadChatMsg()
          broadMsg.info = msgInfo
          this.uiChat.updateScroll()
        }
      })

      // 广播信息删除
      window.DWLive.removeBroadcastMsg = function(data) {
        $('#' + data.id).remove()
        this.uiChat.updateScroll()
      }

      // 接收公聊
      this.HDScene.onPublicChat({
        callback: info => {
          let msgInfo = info
          if (
            LiveInfo.getLoginInfoData('viewer', 'groupId') === msgInfo.groupId ||
            !msgInfo.groupId ||
            !LiveInfo.getLoginInfoData('viewer', 'groupId')
          ) {
            let chatMsg = new ChatMsg()
            msgInfo.startTime = LiveInfo.getLoginInfoData('live', 'liveStartTime')
            chatMsg.info = msgInfo
            this.chatMap[msgInfo.chatId] = chatMsg
          }
          this.uiChat.updateScroll()
        }
      })

      // 接收私聊
      this.HDScene.onPrivateChat({
        callback: info => {
          let msgInfo = info
          let chatMsg = new PrivateChatMsg()
          chatMsg.info = msgInfo
          this.uiChat.updateScroll()
        }
      })

      // 接收私聊回复
      this.HDScene.onPrivateChatRevert({
        callback: info => {
          console.log(info)
          let msgInfo = info
          let chatMsg = new PrivateChatMsg()
          chatMsg.info = msgInfo
          this.uiChat.updateScroll()
        }
      })

      //老师列表
      this.HDScene.onTeachers({
        callback: info => {
          let teachers = info
          for (let i = 0; i < teachers.length; i++) {
            if (!this.teachers[teachers[i].id]) {
              let name = teachers[i].name
              this.teachers[teachers[i].id] = teachers[i].name
              this.uiChat.appendSelected(teachers[i].id, name)
            }
          }
        }
      })
    },
    sendMsgInfo() {
      const t = this
      if (!t.isCanSend) {
        this.$message.warning('发送过于频繁，请稍后')
        return false
      }
      let msg = Utils.trim(t.uiChat.msg)
      if (msg.length > 300) {
        this.$message.warning('聊天不能超过300个字符')
        return false
      }
      if (!msg) {
        this.$message.warning('聊天信息不能为空')
        return false
      }
      t.isCanSend = false
      let teacher = t.selectedTeacher
      let teacherName = t.selectedteacherTitle
      if (t.selectedTeacher === 'all') {
        this.HDScene.sendPublicMsg({ msg: msg })
      } else {
        this.HDScene.sendPrivateMsg({ msg: msg, teacher: teacher, teacherName: teacherName })
      }
      t.uiChat.updateScroll()
      t.uiChat.msg = ''
      t.timeOutId = setTimeout(() => {
        t.isCanSend = true
        clearTimeout(t.timeOutId)
      }, 2000)
    },
    //选择表情
    chatSmile() {
      this.uiChat.isShowChatSmileList = !this.uiChat.isShowChatSmileList
    },
    //选择聊天对象
    chatSelect() {
      this.uiChat.isShowChatSelect = !this.uiChat.isShowChatSelect
    },
    //选择老师
    chatOption(e) {
      let selected = e.target
      if (selected.localName === 'li') {
        this.selectedTeacher = selected.id ? selected.id : 'all'
        this.selectedteacherTitle = selected.innerHTML
        this.uiChat.selectName = this.selectedteacherTitle
      }
      if (this.selectedTeacher != 'all') {
        this.uiChat.chatSwichVisible = true
      } else {
        this.uiChat.chatSwichVisible = false
      }
      this.updateUserList()
    },
    //表情面板
    smilesList(index) {
      if (index < 10) index = `0${index}`
      this.uiChat.smiles = index
      this.uiChat.isShowChatSmileList = false
    },
    //发送聊天按钮
    sendMsg() {
      this.sendMsgInfo()
    },
    updateUserList() {
      if (this.uiChat.chatSwichSelect) {
        this.uiChat.hideChatMsg(false)
        this.uiChat.showPrivateChat(this.selectedTeacher)
      } else {
        this.uiChat.hideChatMsg(true)
      }
    }
  },
  mounted() {
    this.addEvents()
  }
}
</script>

<style lang="scss">
@import './chat.scss';
</style>
